<template>
  <div class="scroll-container">
    <el-card
      v-for="(item, index) in tableData"
      :key="index"
      shadow="hover"
      class="card-item"
    >
      <el-row>
        <el-col :span="12">
          <div class="text item">
            <span>{{ item.name }}</span>
          </div>
          <div class="text item">
            {{ item.date }}
          </div>
        </el-col>
        <el-col :span="12">
          <el-progress
            :percentage="item.progress"
            :status="getProgressStatus(item.progress)"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2024-03-07 16:29:22', name: 'HXD21044A', progress: 100, value: 328 },
        { date: '2024-03-07 16:28:35', name: 'HXD21044A', progress: 100, value: 214 },
        { date: '2024-03-07 14:36:50', name: 'HXD21044A', progress: 100, value: 1021 },
        { date: '2024-02-29 17:05:46', name: 'HXD22067B', progress: 80, value: 85 },
        { date: '2024-02-29 17:05:29', name: 'HXD22067B', progress: 80, value: 25 },
        { date: '2024-02-29 17:05:13', name: 'HXD22067B', progress: 80, value: 32 },
        { date: '2024-02-29 17:04:57', name: 'HXD22067B', progress: 80, value: 152 },
        { date: '2024-02-29 17:04:28', name: 'HXD22067B', progress: 82, value: 458 },
        { date: '2024-02-29 17:04:00', name: 'HXD22033A', progress: 82, value: 86 },
        { date: '2024-02-29 17:03:32', name: 'HXD22033A', progress: 82, value: 63 },
        { date: '2024-02-29 17:00:40', name: 'HXD22033A', progress: 82, value: 46 },
        { date: '2024-02-29 17:00:24', name: 'HXD22033A', progress: 82, value: 116 },
        { date: '2024-02-29 16:59:57', name: 'HXD22033A', progress: 81, value: 4 },
        { date: '2024-02-29 16:58:15', name: 'HXD22033A', progress: 81, value: 23 }
      ]
    }
  },
  methods: {
    getProgressStatus(progress) {
      if (progress >= 100) {
        return 'success'
      } else if (progress < 50) {
        return 'exception'
      }
      return 'warning'
    }
  }
}
</script>

<style>
.scroll-container {
  height: 1000px; /* 设置最大高度 */
  overflow-y: auto; /* 当内容超出时显示滚动条 */
}

.card-item {
  background-color: #F0FFFF;
  margin-bottom: 5px;
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.card-item:hover {
  transform: translateY(-5px); /* 鼠标掠过时向上移动 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 鼠标掠过时增加阴影 */
}

.text {
  font-size: 14px;
  color: #333; /* 修改文字颜色 */
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
